<script setup>
import {onMounted, ref} from "vue";
import ajax from "@/main.js";
import {message} from "ant-design-vue";

const columns = generateColumns();

const data = ref([]);

function generateColumns() {
  let columns = [
    {
      title: 'name/time',
      dataIndex: 'name',
      key: 'name',
      fixed: 'left',
      width: 120
    }
  ];

  // 生成从 00:00 到 23:30 每半小时的 columns
  for (let hour = 0; hour < 24; hour++) {
    for (let minute = 0; minute <= 30; minute += 30) {
      let timeString = `${hour.toString().padStart(2, '0')}:${minute === 0 ? '00' : '30'}`;
      let dataIndex = `t${(hour * 2) + Math.floor(minute / 30) + 1}`;

      columns.push({
        title: timeString,
        dataIndex: dataIndex,
        key: dataIndex,
        width: 70
      });
    }
  }

  return columns;
}

const page = ref(false);

const total = ref([9, 8, 7, 6, 5, 4, 3, 2])
const spinning = ref(false);

function getTotalInfo() {
  spinning.value = true
  ajax.get('/demo/dataShow/getTotalInfo').then(res => {
    if (res.data.code === 200) {
      total.value = res.data.data;
    } else {
        message.error(res.data.msg);
    }
  })

  spinning.value = false
}

function getServerInfo() {
  ajax.get('/demo/dataShow/getServerInfo').then(res => {
    if (res.data.code === 200) {
      data.value = res.data.data;
    } else {
      message.error(res.data.msg);
    }
  })
}

onMounted(() => {
  getTotalInfo();
  getServerInfo();
})

</script>

<template>
    <a-spin :spinning="spinning">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-card title="服务器" :bordered="false" class="card-shadow">
            <p><span style="color: dodgerblue">共计：{{ total[0] }}</span>&nbsp;&nbsp;|&nbsp;&nbsp;
              <span style="color: limegreen">正常：{{ total[1] }}</span>&nbsp;&nbsp;|&nbsp;&nbsp;
              <span style="color: red">禁用：{{ total[0] - total[1] }}</span></p>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="任务" :bordered="false" class="card-shadow">
            <p><span style="color: dodgerblue">共计：{{ total[2] }}</span>&nbsp;&nbsp;|&nbsp;&nbsp;
              <span style="color: limegreen">正常：{{ total[3] }}</span>&nbsp;&nbsp;|&nbsp;&nbsp;
              <span style="color: red">禁用：0</span></p>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="用户" :bordered="false" class="card-shadow">
            <p><span style="color: dodgerblue">共计：{{ total[4] }}</span>&nbsp;&nbsp;|&nbsp;&nbsp;
              <span style="color: limegreen">正常：{{ total[5] }}</span>&nbsp;&nbsp;|&nbsp;&nbsp;
              <span style="color: red">禁用：{{ total[4] - total[5] }}</span></p>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="时段" :bordered="false" class="card-shadow">
            <p><span style="color: dodgerblue">共计：{{ total[6] }}</span>&nbsp;&nbsp;|&nbsp;&nbsp;
              <span style="color: limegreen">未使用：{{ total[6] - total[7] }}</span>&nbsp;&nbsp;|&nbsp;&nbsp;
              <span style="color: red">已使用：{{ total[7] }}</span></p>
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
    <div class="table-content">
      <a-table :columns="columns" :data-source="data" :pagination="page" :scroll="{ y: 535 }">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <a>
              {{ record.name }}
            </a>
          </template>
          <template v-else>
              <span v-if="record[column.key] === '1'">
                <a-badge status="success"/>
              </span>
            <span v-else-if="record[column.key] === '2'">
                <a-badge status="error"/>
              </span>
            <span v-else>
                <a-badge status="default"/>
              </span>
          </template>
        </template>
      </a-table>
    </div>
</template>

<style scoped>
.table-content {
  width: 100%;
  height: 600px;
  background-color: white;
  margin-top: 20px;
  padding-top: 20px;
  overflow-x: auto;
  overflow-y: hidden;
}

.card-shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
</style>